<template>
  <div class="psnum">
    <van-nav-bar>
      <template slot="left">
        <div class="ps_top">
          <div class="ps_left" @click="left">
            <van-icon name="down" />
          </div>
          <div class="ps_right">
            <van-icon name="star-o" @click="star" /><i
              @click="showShare = true"
              class="iconfont iconbtn_share"
            ></i>
          </div>
        </div>
      </template>
    </van-nav-bar>
    <div class="title">
      <h6>
        {{ data.name }}
      </h6>
      <span>{{ data.salary }}</span>
    </div>
    <div class="job-tags">
      <span><i class="iconfont iconicon_city"></i>{{ data.city }}</span
      ><span><i class="iconfont iconicon_nian"></i>{{ data.experience }}</span
      ><span><i class="iconfont iconicon_xueli"></i>{{ data.education }}</span>
    </div>
    <div class="time-tags">
      <span v-for="item in feature" :key="item">{{ item }}</span>
    </div>
    <div class="main-box">
      <span>职业描述</span>
    </div>
    <div class="responsibility-box">
      <div v-html="data.responsibility"></div>
    </div>
    <div>
      <div class="firm" @click="conten" v-if="data.company">
        <div class="imgbox">
          <img :src="baseURL + data.company.logo" alt="" />
        </div>
        <div class="conten">
          <span class="name">{{ data.company.name }}</span
          ><br />
          <div class="tags">
            <span class="tag">{{ data.company.type }} </span>
            <span>{{ data.company.step }}</span>
            <span>{{ data.company.scale }}</span>
            <van-icon class="hali" name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      title="立即分享给好友"
      @select="onSelect"
    />
    <div class="danger">
      <van-button type="danger" @click="danger">去刷题</van-button>
    </div>
  </div>
</template>

<script>
import { positionDetail } from '@/api/api.js'
export default {
  data () {
    return {
      tild: this.$route.fullPath.split('?')[1],
      baseURL: process.env.VUE_APP_URL,
      id: this.$route.params.id,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      data: '',
      // 福利
      feature: []
    }
  },
  methods: {
    onSelect () {
      this.$toast('敬请期待更多新功能哟')
    },
    // 的到职位详情
    async positionDetail () {
      const res = await positionDetail(this.id)
      this.data = res.data
      this.feature = res.data.feature
    },
    // 回退
    left () {
      this.$router.go(-1)
    },
    // 点赞
    star () {
      this.$toast('敬请期待')
    },
    // 跳回企业
    conten () {
      this.$router.go(-2)
    },
    // 跳面试
    danger () {
      this.$router.push({ path: '/interview', query: { company: this.tild } })
    }
  },
  created () {
    this.positionDetail()
  }
}
</script>

<style lang="less" scoped>
.psnum {
  font-size: 18px;
  .van-button {
    width: 94%;
    border-radius: 8px;
    text-align: center;
  }
  .firm {
    font-size: 14px;
    display: flex;
    margin-bottom: 80px;

    .conten {
      flex: 1;
      padding-top: 8px;
      .name {
        font-size: 16px;
      }
      .tags {
        font-size: 12px;
        margin-top: 10px;
        padding-top: 4px;
        position: relative;
        span {
          border: 1px solid #b4b4bd;
          border-radius: 5px;
          padding: 2px 4px;
          margin-right: 8px;
        }
        .hali {
          font-size: 22px;
          position: absolute;
          right: 5px;
          top: -18px;
        }
      }
    }
    .imgbox {
      margin-right: 46px;
      padding-left: 20px;
      img {
        height: 1.66667rem;
      }
    }
  }
  .main-box {
    padding-left: 20px;
  }
  .responsibility-box {
    padding: 20px;
    font-size: 16px;
  }
  .van-nav-bar {
    box-shadow: 0 0.05333rem 1.10667rem 0 rgba(24, 26, 57, 0.04);
  }
  .title {
    span {
      position: relative;
      padding: 22px;
      font-size: 15px;
    }
  }
  .van-nav-bar__left {
    .van-icon-down::before {
      transform: rotate(90deg);
      color: black;
      font-size: 20px;
    }
  }
  .ps_top {
    position: relative;
    .ps_left {
      position: absolute;
      top: 0;
      bottom: 0;
      font-size: 12px;
      align-items: center;
    }
    .ps_right {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -330px;
      display: flex;
      align-items: center;
      i {
        margin-right: 10px;
        font-size: 28px;
        color: black;
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    h6 {
      line-height: 67px;
      margin: 0;
      font-size: 24px;
    }
    span {
      padding: 0;
      font-weight: 400;
      color: #e40171;
      line-height: 67px;
    }
  }
  .job-tags {
    margin-top: 19px;
    display: flex;
    padding-left: 24px;
    span {
      font-size: 12px;
      margin-right: 18px;
      display: flex;
      align-items: center;
      color: #181a39;
    }
    i {
      color: #b4b4bc;
    }
  }
  .time-tags {
    padding: 20px 24px;
    margin-top: 14px;
    font-size: 12px;
    color: #b4b4bd;
    span {
      margin-right: 8px;
    }
  }
  .danger {
    text-align: center;
    width: 100%;
    height: 80px;
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
